<template>
  <div>
    <div>
      <el-input
              style="width: 300px"
              placeholder="添加职称..."
              prefix-icon="el-icon-plus"
              size="small"
              v-model="jobLevelAdd.name">
      </el-input>
      <el-select size="small" v-model="jobLevelAdd.titleLevel" placeholder="职称等级"
                 style="width: 200px;margin-left: 8px;margin-right: 8px" >
        <el-option
                v-for="item in titleLevels"
                :key="item"
                :label="item"
                :value="item">
        </el-option>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="addJobLevel">添加</el-button>
    </div>
    <div>
      <el-table
              :data="jobLevelManan"
              border
              @selection-change="handleSelectionChange"
              style="width: 80%">
        <el-table-column
                type="selection"
                width="50">
        </el-table-column>
        <el-table-column
                prop="id"
                label="编号"
                width="80">
        </el-table-column>
        <el-table-column
                prop="name"
                label="职称名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="titleLevel"
                width="180"
                label="职称级别">
        </el-table-column>
        <el-table-column
                prop="createDate"
                width="150"
                label="创建时间">
        </el-table-column>
        <el-table-column
                label="是否启用">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
            <el-tag type="danger" v-else>未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                    size="mini" @click="showEditPosition(scope.$index, scope.row)">编辑</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button size="small" type="danger"
                 :disabled="multipleSelection.length==0"
                 style="margin-top: 8px" @click="deleteMany">批量删除</el-button>
      <el-dialog
              title="编辑职称"
              :visible.sync="dialogVisible"
              width="30%">
        <div>
          <table>
            <tr>
              <td><el-tag>职称名</el-tag></td>
              <td><el-input size="small" v-model="updateJobLevel.name"></el-input> </td>
            </tr>
            <tr>
              <td><el-tag>职称级别</el-tag></td>
              <td>
                <el-select size="small" v-model="updateJobLevel.titleLevel" placeholder="职称等级"
                           style="width: 200px;margin-left: 8px;margin-right: 8px" >
                  <el-option
                          v-for="item in titleLevels"
                          :key="item"
                          :label="item"
                          :value="item">
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td><el-tag>是否启动</el-tag></td>
              <td>
                <el-switch
                        v-model="updateJobLevel.enabled" active-text="启用" inactive-text="禁用">
                </el-switch>
              </td>
            </tr>
          </table>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateJob">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

  export default {
    name: "DepMana",
    data() {
      return {
        dialogVisible:false,
        jobLevelAdd: {
          name:'',
          titleLevel:''
        },
        updateJobLevel:{
          name: '',
          titleLevel: '',
          enabled: ''
        },
        jobLevelManan:[],
        titleLevels:[
            '正高级',
            '副高级',
            '中级',
            '初级',
            '员级'
        ],
        multipleSelection: []
      }
    },
    mounted(){
      this.initJobLevel();
    },
    methods: {
      // 批量删除
      deleteMany(){
        this.$confirm('此操作将永久删除【' + this.multipleSelection.length+ '】条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = '?';
          this.multipleSelection.forEach(item => {
            ids += 'ids=' + item.id + '&';
          })
          console.log(ids);;
          this.deleteRequest("/system/basic/job/" + ids).then( resp => {
            if (resp){
              this.initJobLevel()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      updateJob(){
        this.putRequest("/system/basic/job/",this.updateJobLevel).then(resp => {
          if (resp){
            this.initJobLevel();
            this.dialogVisible=false;
          }
        });
      },
      showEditPosition(index,row){
        this.dialogVisible = true;
        Object.assign(this.updateJobLevel,row)
      },
      handleDelete(index,row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.deleteRequest("/system/basic/job/" + row.id).then( resp => {
              if (resp){
                this.initJobLevel()
              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 添加职称数据
      addJobLevel(){
        if (this.jobLevelAdd.name&&this.jobLevelAdd.titleLevel){
          this.postRequest("/system/basic/job/",this.jobLevelAdd).then(resp => {
            if (resp){
              this.jobLevelAdd = {
                name:'',
                titleLevel:''
              }
              this.initJobLevel();
            }
          })
        } else {
          this.$message.error("添加字段不可以为空！");
        }

      },
      initJobLevel(){
        this.getRequest("/system/basic/job/").then(resp => {
          this.jobLevelManan = resp;
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<style scoped>

</style>